<template>
 <div>
 <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>系统公告</el-breadcrumb-item>
  <el-breadcrumb-item>信息修改与查看</el-breadcrumb-item>
  </el-breadcrumb>
<!-- 卡片视图 -->
<el-card>
<div style="margin-top: 15px;">
 <el-row :gutter="30">
  <el-col :span="8">
  <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
    <el-button slot="append" icon="el-icon-search" @click="SearchNotice"></el-button>
  </el-input>
  
  </el-col>
  <el-col :span="4">
  <el-button type="primary" @click="OpenAddDialog">添加公告</el-button>
  </el-col>
  
</el-row>
<!-- 搞个表格-->
<el-table
:data="NoticeList"
        border
        
        style="width: 100%"
      >
<el-table-column type="index"> </el-table-column>
<el-table-column prop="title" label="公告名" width="180"></el-table-column>
<el-table-column prop="content" label="公告内容" width="180"></el-table-column>
<el-table-column prop="createtime" label="创建日期" width="180" :formatter="dateFormat"></el-table-column>
<el-table-column prop="updatetime" label="修改日期" width="180" :formatter="dateFormat"></el-table-column>
  <el-table-column label="操作" width="190">
          <template slot-scope="scope">
            <!--修改按钮-->
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top"
              
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click = "OpenEditDialog(scope.row.id)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
              
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click = "DeleteNoticeById(scope.row.id)"
              ></el-button>
            </el-tooltip>
            
          </template>
        </el-table-column>

</el-table>
<!-- 搞个分页插件-->
<el-pagination

  @current-change="handleCurrentChange"
  
  :page-size="4"
  :pager-count="5"
  layout="prev, pager, next"
  :total="total">
</el-pagination>
</div>

</el-card>
<!-- 绘制一个添加对话框-->
<el-dialog
      title="添加新的公告"
      :visible.sync="AddDialogVisible"
      width="50%"
      @close="AddDialogClosed"
    >
    <!-- 声明表单存放数据 -->
<el-form
        :model="addForm"
        :rules="rules"
        ref="addFormRef"
        label-width="70px"
    >
    <el-form-item label="标题" prop="title">
          <el-input v-model="addForm.title"></el-input>
    </el-form-item>
    <el-form-item label="内容" prop="content">
          <el-input v-model="addForm.content"></el-input>
    </el-form-item>




    </el-form>
<span slot="footer" class="dialog-footer">
        <el-button @click="AddDialogClosed">取 消</el-button>
        <el-button type="primary" @click="AddNotice">确 定</el-button>
</span>
</el-dialog>
<!-- 绘制编辑对话框-->
 <el-dialog
      title="公告信息修改"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
    
   
   <!-- 编辑用表单-->
     <el-form
        :model="editNoticeList"
        :rules="rules"
        ref="editFormRef"
        label-width="70px"
    >
    <el-form-item label="标题" prop="title">
          <el-input v-model="editNoticeList.title"></el-input>
    </el-form-item>
    <el-form-item label="内容" prop="content">
          <el-input v-model="editNoticeList.content"></el-input>
    </el-form-item>




    </el-form>
<span slot="footer" class="dialog-footer">
        <el-button @click="editDialogClosed">取 消</el-button>
        <el-button type="primary" @click="EditNoticeById">确 定</el-button>
</span>
    </el-dialog>
    <!-- 这里获取编辑表单-->




 </div>


</template>

<script>
//对外暴露接口
 export default {
name:'EditNotice', 
   data () {
     return {
         input3:"",
         NoticeList:[
             {
                 title:"测试公告",
                 content:"测试公告内容",
                 createtime:"2021-04-09T08:29:26.000+0000",
                 updatetime:"2021-04-09T08:29:26.000+0000",
             }
         ],
         addForm:{

         },
         total:5,
         //搜索状态与常规状态的切换
         IsSearch:false,
         AddDialogVisible:false,
         rules:{
            title: [
            { required: true, message: '请填写此字段', trigger: 'blur' },
          ],
          content: [
            { required: true, message: '请填写此字段', trigger: 'blur' },
          ],
          
          
          },
          //编辑对话框的展示
          editDialogVisible:false,
          //编辑用表单展示
          editNoticeList:[],


     }
   },
   components: {

   },
   created() {
       
   },
   mounted() {
       this.GetNoticeByPage(1,4)
   },
   methods:{
       //真正的搜索函数
       GetNoticeByPageBySearch(pagenum,count){
           let that = this
           let url = "api/SearchNoticeByTitle"
           let data={
           pagenum:pagenum,
           count:count,
           title:this.input3
        }
        this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if ((code == 200)) {
         that.NoticeList = data.data;
         that.total = data.total;
         //把搜索置为true
         that.IsSearch = true;
        } else {
          that.$message.error(message);
        }
      });


       },

       //查询按钮触发函数
       SearchNotice(){
         this.GetNoticeByPageBySearch(1,4)

       },
       //开启添加对话框
       OpenAddDialog(){
           this.AddDialogVisible=true;

       },
       //开启编辑对话框
       OpenEditDialog(id){
           //先去后台获取到最新值
           
            let that = this
            let url = "api/GetNoticeByid"
            let data={
              id:id
            }
            this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if ((code == 200)) {
         that.editNoticeList = data;
         //真正的打开对话框
         that.editDialogVisible = true;
        } else {
          that.$message.error(message);
        }
      });

            

       },
       GetNoticeByPage(pagenum,count){
           




           //后端发信
        let that = this
        let url = "api/GetNoticeByPage"
        let data={
           pagenum:pagenum,
           count:count,
        }
        this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if ((code == 200)) {
         that.NoticeList = data.data;
         
        
         that.total = data.total
        } else {
          that.$message.error(message);
        }
      });

       },
       //分页插件触发函数
       handleCurrentChange(val){
           if(this.IsSearch){
               this.GetNoticeByPageBySearch(val,4)
           }
           else{
               this.GetNoticeByPage(val,4)
           }
         

       },
       //格式化时间 声明在表格上的过滤器
       dateFormat(row, column) {
           let date = row[column.property];
           
           if (date === undefined) {
                  return row[column.property];
             }
           let datetime = new Date(date).toLocaleDateString()

           return datetime;
},
       //关闭添加对话框
       AddDialogClosed(){
           this.AddDialogVisible=false
           this.$refs['addFormRef'].resetFields()
       },
       //关闭编辑对话框
       editDialogClosed(){
           this.editDialogVisible = false

       },
       //添加操作触发函数
       AddNotice(){
           console.log(this.addForm.content)
           
       

           //去后端取数据
            let that = this;
            let url = "api/AddNotice";
            let data = {
                title:this.addForm.title,
                content:this.addForm.content,
            }
            this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if ((code == 200)) {
           that.AddDialogClosed()
           that.IsSearch = false
           that.GetNoticeByPage(1,4)
        } else {
          that.$message.error(message);
        }
      });

       },
       EditNoticeById(){
            let that = this
            let url = "api/EditNoticeByid"
            let data = {
                id:this.editNoticeList.id,
                title:this.editNoticeList.title,
                content:this.editNoticeList.content,
            }
            this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if ((code == 200)) {
         that.$message.success(message)
         that.IsSearch = false;
         that.GetNoticeByPage(1,4);
         that.editDialogClosed();

        } else {
          that.$message.error(message);
        }
      });


       },
       DeleteNoticeById(id){
           let that = this
           let url = "api/DeleteNoticeByid"
           let data = {
               id:id
           }
           this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if ((code == 200)) {
         that.$message.success(message)
         that.IsSearch = false;
         that.GetNoticeByPage(1,4);
         that.editDialogClosed();
        
         that.total = data.total
        } else {
          that.$message.error(message);
        }
      });


       }

    
       
       

   }
 }
</script>

<style scoped>

 
</style>
